<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>深入响应式原理</title>
    <script src="../public/vue2.7.14-dev.js"></script>
  </head>
  <body>
    <div id="app">{{a}}
        <p>C.name:{{c.name}}</p>
        <p>C.age:{{c.age}}</p>
        <p>C.age:{{c.sex}}</p>
        <p>C.grade>:{{c.grade}}</p>
        <p>C.num>:{{c.num}}</p>

        <button @click="add">点击我改变这个对象和改变数组第二个值</button>
        <br><br>
        {{d}}
        <button @click="addsome">点击直接增加一些prop和splice改变数组</button>
        <br>
        {{e}}
    </div>

    
    <script>
      //这里你也可以尝试用·
      Vue.config.productionTip = false;
      var vm = new Vue({
        el: "#app",
        data: {
          a: 1,
          c:{
            name:'luoyu',
            age:18,
            num:[1,2,3,4],
            grade:{
                db:"coed",
                data:"xiaoyugege"
            }
          },
          d:{
            disk:"D盘",
          },
          e:["apple","orige","bean","mongo"]
        },
        methods: {
            add(){
                console.log("22");
                this.$set(this.c.grade,'hello',"yyy")
                this.c.grade.hello="kkk"

                //改变数组第二个值
                this.$set(this.c.num,1,10000000)
                

            },
            addsome(){
              // /有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。
              // 但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
              let book={
                bookname:'javascript高级学习',
                bookprice:100,
                author:"马特"
              }
              //注意这里的多组对象添加上对象。
              this.d=Object.assign({},this.d,book)
              
              //其实解决数组响应式还有另外一种方法，就是对数组整体的改变，比如用arr.splice()方法
              this.e.splice(0,1,"change yes")
            },

        },
      });

      // `vm.a` 是响应式的
      vm.b = 2;
      // `vm.b` 是非响应式的

      /* 如果要设置响应式：这里有一点要注意：Vue 无法检测 property 的添加或移除，但是他能给存在的对象进行响应式
      对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。
      但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。
      */
     Vue.set(vm.c,'sex','男');
     //同时也可以直接在实例方法上进行设置。
    </script>
  </body>
</html>
